<template>
  <div class="image-box">
    <nav><h2>上传图片</h2></nav>
    <clip-image @saveImage="saveImage" v-if="!state.isSave"></clip-image>
    <div class="res-box" @click="change" v-else>
      <img :src="state.data" alt="" crossorigin="anonymous"/>
    </div> 
  </div>
</template>


<script setup>
import { reactive } from '@vue/reactivity'
import ClipImage from '../components/ClipImage.vue'

let state=reactive({
  isSave:false,
  data:""
})

const saveImage=(payload)=>{
  // console.log(payload)
  state.isSave=true;
  console.log(state.isSave)
  state.data=payload;
  console.log(state.data)
}

</script>

<style scoped>

.res-box{
  /* display: block; */
  width: 2rem;
  height: 2rem;
  border: 0.01rem solid blue;
  box-sizing: border-box;
  margin: 0 auto;
}


</style>